<template>
	<view class="content  padding-top-30">
		<view class=" padding-about-34 font-size-26 font-weight-bold color-999">
			验证成功，请在下方输入新的手机号并填写验证码
		</view>
		<view style="background-color: #FFFFFF;" class="margin-top-20">
			<view class="display-flex space-between alig" style="padding: 20rpx 34rpx;">
				<view class="display-flex file-1 alig">
					<view class="font-size-26 margin-right-20">
						手机号
					</view>
					<input type="text" value="" class="font-size-24" placeholder="请输入完整手机号" />
				</view>
			</view>
		</view>
		<view style="background-color: #FFFFFF;" class="margin-top-20">
			<view class="display-flex space-between alig" style="padding: 20rpx 34rpx;">
				<view class="display-flex file-1 alig">
					<view class="font-size-26 margin-right-20">
						验证码
					</view>
					<input type="text" value="" class="font-size-24" placeholder="请输入验证码" />
				</view>
				<view class="getcode" @click="getCode">
					{{tips}}
				</view>
			</view>
		</view>
		<view class="font-size-32 font-weight-bold margin-top-120 padding-about-34" style=" color: #E81A1A;">
			注：
		</view>
		<view class=" font-size-24 margin-top-20 padding-about-34">
			1.无法解绑手机号；手机号一旦换绑，则所关联的实名认证手机号、提现手机号将同步更换为新手机号。<br/>
			2.若您的账号使用手机号登录，换绑后，将使用新号码作为登录手机号。
		</view>
		<view class="display-flex center margin-top-120">
			<view class="button" style="padding: 24rpx 308rpx;" @click="submit">
				提交
			</view>
		</view>
		
		<popupBox ref="toast" :isSlot="true">
			<view class="toast-box">
				<image :src="$img_path('/course/pay_s.png')" mode="widthFix"></image>
				<view class="text">
					您已成功更换绑定手机号
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import popupBox from '../../../components/popup/popup.vue';
	export default {
		components: {
			popupBox
		},
		data() {
			return {
				tips: '获取验证码',
				// refCode: null,
				seconds: 10,
				status:0
			};
		},
		onReachBottom() {},
		onLoad(option) {},
		onShow() {},
		methods: {
			getCode() {
				if(this.status==0){
					this.status = 1
					let i = setInterval(()=>{
						if(this.seconds>0){
							this.seconds--
							this.tips = this.seconds+'s'
						}else{
							this.status = 0
							this.seconds = 10
							this.tips = '重新获取'
							clearInterval(i)
						}
					},1000)
				}
			},
			submit(){
				this.$refs.toast.open()
			}
		},
		computed: {},
		watch: {}
	};
</script>

<style scoped lang="scss">
	.getcode{
		width: 168rpx;
		height: 64rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		border: 1rpx solid #F4F4F4;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 64rpx;
		text-align: center;
	}
	.toast-box{
		width: 650rpx;
		height: 524rpx;
		background-color: #FFFFFF;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		image{
			width: 200rpx;
			height: 200rpx;
		}
		.text{
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
			line-height: 50rpx;
			margin-top: 40rpx;
		}
	}
</style>